<!--  -->
<template>
  <div>
    <div class="title">居民管理</div>
    <ELTable ref="userTable" v-bind="tableConfig">
      <template #search="{searchSubmit,params}">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="楼栋">
            <Buildings  @change="(e)=>buildingChange(e,params)"></Buildings>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input style="width:150px"  v-model="params.name" placeholder="请输入姓名" clearable />
          </el-form-item>
          <el-form-item label="电话">
            <el-input style="width:150px" v-model="params.mobile" placeholder="请输入电话" clearable />
          </el-form-item>
          <el-form-item label="房间号">
            <el-input style="width:150px"  v-model="params.houseno" placeholder="请输入房间号" clearable />
          </el-form-item>
          <el-form-item label="业主类型">
          <el-select clearable v-model="params.usertype" style="width:120px" placeholder="请选择状态">
            <el-option label="租户" value="2" />
            <el-option label="业主" value="1" />
          </el-select>
        </el-form-item>
          <el-form-item>
              <el-button class="search" type="primary" @click="searchSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
      </template>
      <template #buttons="{ deleteAllHandle }">
        <el-button class="add" @click="add" type="primary">添加</el-button>
        <el-button class="del" @click="deleteAllHandle" type="danger">删除</el-button>
      </template>
      <template #operate="{ scope, deleteHandle }">
        <el-button @click="edit(scope.row)" type="primary" >修改</el-button>
        <el-button @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
      </template>
      <template #photo="{ scope }">
        <el-image style="width:50px; height:50px" :src="BasUrl + scope.row.photo"
          :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
          :preview-src-list="[BasUrl + scope.row.photo]" :initial-index="4"
          preview-teleported fit="cover" />
      </template>
    </ELTable>
    <Add v-bind="editUser" @close="handleClose" v-if="isAdd"></Add>
  </div>
</template>
<script lang='ts' setup>
import ELTable from '../../components/table/TableView.vue';

import { reactive, ref } from 'vue'
import Buildings from '../../components/building/Buildings.vue';
import Add from '../../components/user/Add.vue';
import { DataInfo } from '../../service/userinfo/type';
const BasUrl =import.meta.env.VITE_IMG_URL

const isAdd=ref(false);

const editUser = reactive<DataInfo>({
  id: 0,
        photo:"",
        name:"",
        houseid: null,
        usertype:null,
        sex:0,
        buildingid:null,
        mobile: "",
        usernative:"",
        cardid: "",
        nation:""
})

const add=()=>{
  Object.assign(editUser,{id: 0,
        photo:"",
        name:"",
        houseid: null,
        usertype:null,
        buildingid:null,
        sex:0,
        mobile: "",
        usernative:"",
        cardid: "",
        nation:""
});
  isAdd.value=true;
}
const edit=(item:DataInfo)=>{
console.log(123);


   Object.assign(editUser,item);
    isAdd.value=true;
   
   
}
import {tableConfig} from './User'
const userTable=ref<any>();

const buildingChange=(e:any,params:any)=>{

  console.log(999,e);
  params.buildingid=e;
  

}

const handleClose=(val:boolean | undefined)=>{
  isAdd.value=false;
  if(val){
     console.log("提交成功，刷新页面");
     userTable.value.params.page=1;
     userTable.value.getData();
     
  }

}
</script>
<style scoped>
@import url(../../assets/styles/user/user.css);
</style>